<template>
  <view class="wrapper">
    <view class="header-bg">
      <view class="header-box">
        <view class="tip-line"
          >有<span class="tip-red">{{ newApplyList.length || 0 }}</span
          >个新朋友添加你</view
        >
        <view class="cell-line" v-for="item in newApplyList" :key="item._id">
          <image :src="item.avatar" class="avatar"></image>
          <view class="user-info">
            <view class="nick-name">{{ item.username }}</view>
            <view class="user-text">{{ item.content }}</view>
          </view>
          <button class="look-btn" @click="handleToDetail(item.username)">
            查看
          </button>
        </view>
      </view>
    </view>
    <view class="history-list">
      <view class="subtitle">历史添加</view>
      <view class="cell-line" v-for="item in oldApplyList" :key="item._id">
        <image :src="item.avatar" class="avatar"></image>
        <view class="user-info">
          <view class="nick-name">{{ item.username }}</view>
          <view class="user-text">{{ item.content }}</view>
        </view>
        <view class="apply-status">{{item.friendStatus == 1 ? '已添加' : '已拒绝'}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { queryApplyList } from "@/services/friends";
export default {
  name: "NewFriends",
  data() {
    return {
      newApplyList: [],
      oldApplyList: [],
    };
  },
  methods: {
    async getApplyList() {
      const res = await queryApplyList({
        username: "",
      });
      if (res.code !== 200) return;
      this.newApplyList = res.data.filter((item) => {
        return item.friendStatus == 0;
      });
      this.oldApplyList = res.data.filter((item) => {
        return item.friendStatus != 0;
      });
      console.log(this.applyList);
    },
    handleToDetail(username) {
      uni.navigateTo({
        url: `/pages/friends/FriendsDetail?username=${username}`,
      });
    },
  },
  onShow() {
    this.getApplyList();
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100vh;
  background: #f6f6f6;
  .header-bg {
    background: #ffe3e2;
    .header-box {
      background: #ffffff;
      border-radius: 60upx 60upx 0 0;
      .tip-line {
        box-sizing: border-box;
        padding: 40upx 0;
        font-size: 26upx;
        font-weight: 400;
        color: #000000;
        text-align: center;
        border-bottom: 2upx solid #f6f6f6;
        .tip-red {
          margin: 0 8upx;
          font-weight: bold;
          color: #ff5551;
        }
      }
    }
  }
  .history-list {
    .subtitle {
      width: 100%;
      box-sizing: border-box;
      padding: 22upx 30upx 14upx 30upx;
      font-size: 24upx;
      font-weight: 400;
      color: #878787;
    }
  }
  .cell-line {
    width: 100%;
    box-sizing: border-box;
    padding: 30upx;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    .avatar {
      width: 80upx;
      height: 80upx;
      border-radius: 50%;
    }
    .user-info {
      flex: 1;
      margin-left: 30upx;
      .nick-name {
        font-size: 30upx;
        font-weight: 500;
        color: #000000;
        line-height: 1em;
      }
      .user-text {
        margin-top: 18upx;
        font-size: 24upx;
        font-weight: 400;
        color: #878787;
        line-height: 1em;
      }
    }
    .look-btn {
      height: 48upx;
      box-sizing: border-box;
      padding: 0 25upx;
      background: #ff5551;
      border-radius: 24upx;
      font-size: 26upx;
      font-weight: 400;
      color: #ffffff;
      line-height: 48upx;
    }
    .apply-status {
      font-size: 26upx;
      font-weight: 400;
      color: #FF5551;
    }
  }
}
</style>